<template>
  <div class="main">
    <div>main</div>
    <div>{{ testStore.test }}</div>
    <button @click="edit">修改 state 值</button>
    <button @click="reset">reset API</button>
  </div>
  <PiniaTest />
</template>

<script setup lang="ts">
import PiniaTest from './PiniaTest.vue';
import { useTestStore } from '@/store/pinia/store';
const testStore = useTestStore();
// console.log('testStore', testStore.test);

// 1. 直接修改值
// const edit = () => {
//   testStore.test = '直接修改 state 值';
// };

// 2. .$patch 批量修改State的值
// const edit = () => {
//   testStore.$patch({
//     test: '.$patch 批量修改State的值'
//   });
// };

// 3. .$patch 批量修改函数形式,可自定义修改逻辑
// const edit = () => {
//   testStore.$patch((state) => {
//     state.test = '.$patch 批量修改函数形式,可自定义修改逻辑';
//   });
// };

// 4. 通过原始对象修改整个实例,缺点就是必须修改整个对象的所有属性
// const edit = () => {
//   testStore.$state = {
//     test: '通过原始对象修改整个实例,缺点就是必须修改整个对象的所有属性'
//   };
// };

// 5. 通过 actions 修改,在 actions 中直接使用this就可以指到state里面的值
const edit = () => {
  // 调用 store 中 actions 的 方法
  testStore.editTest();
};

// store 解构取值,使用 storeToRefs ,否则失去响应式
// const { test } = testStore;  失去响应式
import { storeToRefs } from 'pinia';
const { test } = storeToRefs(testStore);

// API
// 1. $reset
const reset = () => {
  testStore.$reset();
};

// 2. $subscribe
testStore.$subscribe(
  (args, state) => {
    // console.log('state 中值变化的时候执行');
  },
  {
    detached: true // 组件卸载之后还想调用可以设置
  }
);

// 3. $onAction
testStore.$onAction((args) => {
  // console.log(args);
});
</script>

<style lang="scss" scoped>
.main {
  width: 80vw;
  height: 300px;
  background: pink;
  margin: 0 auto;
  padding-left: 20px;
}
</style>
